.el-card-header {
	font-size: 16px;
	font-weight: bold;
}

.el-card-header-tip {
	font-size: 14px;
	border-left: 3px solid var(--cc-main-color);
	border-radius: 3px;
	padding: 20px;
	background-color: var(--cc-menu-active-back-color);
	margin-top: 20px;

	code {
		color: var(--cc-main-color);
		margin: 0 4px;
		font-family: system;
	}

	a {
		color: rgba(0, 145, 255, 1);
		margin-left: 4px;
	}
	ul {
		margin-block-start: 0;
    margin-block-end: 0;
		padding-inline-start: 20px;
		li {
			list-style-type:auto;
			line-height: 18px;
		}
	}
}

$MC3: #75c140;
$MC4: #55c4f2;

code[class*='language-'],
pre[class*='language-'] {
	color: #000;
	background: 0 0;
	text-shadow: 0 1px #fff;
	font-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace;
	font-size: 1em;
	text-align: left;
	white-space: pre;
	word-spacing: normal;
	word-break: normal;
	word-wrap: normal;
	line-height: 1.5;
	-moz-tab-size: 4;
	tab-size: 4;
	-webkit-hyphens: none;
	-ms-hyphens: none;
	hyphens: none;
	padding: 20px;
	margin: 0;
}

.token.tag {
	color: rgb(67, 67, 165);
}

.token.punctuation {
	color: #9a8989;
}

.token.attr-name {
	color: $MC3;
}

.token.attr-value,
.token.keyword {
	color: $MC4;
}

.token.class-name,
.token.function {
	color: #dd4a68;
}

.token.attr-name,
.token.builtin,
.token.char,
.token.inserted,
.token.selector,
.token.string {
	color: #690;
}

.components .el-card {
	.el-card__body {
		padding-bottom: 0;
	}


	margin-bottom: 20px;
}

.components {


	.left {
		float: left;
		width: calc(100% - 220px);
	}

	&>.right {
		width: 200px;
		float: left;
		padding-left: 20px;
	}
}

.code-div {
	width: 100%;
	max-height: 500px;
	overflow-y: auto;
}